<template>
  <div
    :style="{'--status':colorObj[data.type]}"
    class="mStatusBox"
  >
    <div class="m-status">
      <i class="after-status"></i>
    </div>
    <span class="title">{{data.statusName}}</span>
  </div>
</template>

<script>
  export default {
    name: 'mStatus',
    props: {
      data: {
        type: Object,
        /* 0运行中 1运行完成  2运行失败 */
        default: () => ({
          type: 0,
          statusName: '运行中'
        })
      }
    },
    data () {
      const colorObj = {
        0: '242, 112, 17',
        1: '52, 169, 0',
        2: '247, 86, 78'
      }
      return {
        colorObj
      }
    }
  }
</script>
<style scoped lang='scss'>
.mStatusBox {
  display: flex;
  align-items: center;
  .m-status {
    margin: 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--status), 0.3);
    .after-status {
      display: block;
      width: 8px;
      height: 8px; //247,86,78,0.50
      background: rgba(var(--status), 1);
      border-radius: 50%;
    }
  }
  .title {
    color: var(--status);
  }
}
</style>
